<template>
  <div class="about">
    <div class="about-body">
      <img
        src="~/static/img/web_bg_aboutus.png"
        class="about-bg">
      <div class="about-content">
        <div>
          <div class="dnd-title">
            <img
              class="logo" 
              src="~/static/img/web_logo_yellow.png">
            <h1>多拿点</h1>
          </div>
          <div
            :class="active"
            class="line" />
          <h4 
            :class="fadeIn">新零售社交电商平台</h4>
        </div>
        <div
          v-show="show"
          class="contact">
          <img
            :class="fadeIns"
            src="~/static/img/web_ic_mail.png"
            @mouseenter="enter"
            @mouseleave="leave">
          <span :class="fadeIns" />
          <img
            :class="fadeIns"
            src="~/static/img/web_ic_wechat.png"
            @mouseenter="enterM"
            @mouseleave="leaveM">
          <div
            v-if="showEm"
            class="hover-email">
            <img src="~/static/img/web_ic_mail02.png">
            <p>mrzhao@duonadian.com</p>
          </div>
          <div
            v-if="showMx"
            class="hover-minxi">
            <img src="~/static/img/wxh.jpg">
          </div>
        </div>
      </div>
    </div>
    <div class="about-about">
      杭州朝航科技有限公司 版权所有©️浙ICP备18042841号-1
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'

export default {
  data() {
    return {
      active: '',
      fadeIn: 'animated fadeInDown',
      fadeIns: '',
      showEm: false,
      showMx: false,
      show: false
    }
  },
  mounted() {
    this.active = 'active'
    this.time = setTimeout(() => {
      this.show = true
      this.fadeIns = 'animated slow fadeIn'
    }, 1300)
  },
  beforeDestroy() {
    clearTimeout(this.time)
  },
  methods: {
    enter() {
      this.showEm = true
    },
    leave() {
      this.showEm = false
    },
    enterM() {
      this.showMx = true
    },
    leaveM() {
      this.showMx = false
    }
  }
}
</script>


<style lang="scss" scoped>
.about {
  width: 100%;
  height: 100%;
  .copyrelay {
    position: absolute;
    opacity: 0;
    width: 100%;
  }
  .about-body {
    width: 100%;
    height: calc(100% - 4.17rem);
    .about-bg {
      width: 100%;
      height: 100%;
    }
  }
  .about-about {
    width: 100%;
    height: 4.17rem;
    font-size: 1rem;
    background-color: black;
    text-align: center;
    color: white;
    line-height: 4.17rem;
  }
  .about-content {
    position: absolute;
    top: 20rem;
    width: 100%;
    .dnd-title {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 0.5rem;
      .logo {
        width: 4rem;
      }
      h1 {
        height: 4.08rem;
        font-size: 2.92rem;
        font-family: STYuanti-SC-Regular;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        line-height: 4.08rem;
        display: inline-block;
        margin-left: 1rem;
      }
    }
    h4 {
      color: #ffffff;
      margin: 0.5rem auto 7rem;
      font-size: 1.5rem;
      text-align: center;
    }
    .line {
      width: 0.1rem;
      height: 0.17rem;
      background-color: #f8e71c;
      left: 0;
      right: 0;
      margin: auto;
      border-radius: 5rem;
      &.active {
        width: 13.83rem;
        transition: 1.5s;
      }
    }
  }
  .contact {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
    span {
      background: #ffffff;
      width: 0.1rem;
      height: 4.42rem;
      display: inline-block;
      margin: 0 2rem;
    }
    img {
      width: 5rem;
    }
    .hover-email {
      background: #ffffff;
      width: 18rem;
      height: 5rem;
      border-radius: 0.92rem;
      font-size: 1.25rem;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 9rem;
      left: 30%;
      img {
        width: 2rem;
        margin-right: 1rem;
      }
      p {
        display: inline-block;
        padding: 0;
        margin: 0;
      }
    }
    .hover-minxi {
      width: 15rem;
      height: 15rem;
      background: #ffffff;
      position: absolute;
      right: 34%;
      top: -1rem;
      box-sizing: border-box;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.92rem;
      }
    }
  }
}
</style>
